<div class="main-container flex-col">
    <div class="main-section">
        <div class="flex-col login-container">
            <div class="menu-brand flex-col">
                <h6 title="Segfault">SF</h6>
                <span id="brandInfo">by hackerschoice</span>
            </div>

            <div *ngIf="LoginWithSecret && !loadingDashBoard" class="input-secret">
                <input type="password" [disabled]="loginDisabled" autofocus [(ngModel)]="secret" placeholder="Secret..."
                    required (keyup.enter)="login()">
                <div [ngClass]="{
                    'lds-ring': loginDisabled
                }">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <img class="input-secret-img" src="../../../assets/icons/arrow-forward.svg" alt=""
                        (click)="login()">
                </div>
            </div>

            <div *ngIf="!LoginWithSecret  && !loadingDashBoard" class="flex-col login-btn-container">
                <div>
                    <button mat-raised-button class="start-new-btn" (click)="login()">I'm New Here</button>
                </div>
                <div>
                    <button mat-raised-button class="enter-secret-btn" (click)="toggleLoginWithSecret()">I've Been
                        Here</button>
                </div>
            </div>


            <div *ngIf="!loadingDashBoard" class="login-info">
                <span *ngIf="LoginWithSecret">
                    Enter your Segfault secret<br>to start using...
                </span>
                <div *ngIf="LoginWithSecret" class="go-back" (click)="toggleLoginWithSecret()">
                    <span><u><- Go Back</u></span>
                </div>
                <span *ngIf="!LoginWithSecret">
                    Disposable Root Servers
                </span>
            </div>
            <div *ngIf="loadingDashBoard" class="login-info">
                <div class="loading-dashboard flex-row">
                    <div>
                        <mat-progress-spinner class="loading-dash-spinner" color="danger" mode="indeterminate">
                        </mat-progress-spinner>
                    </div>
                    <span>Loading DashBoard...</span>
                </div>
            </div>
        </div>
    </div>
    <div class="flex flex-row bottom-bar">
        <div class="flex flex-col build-info">
            <span *ngIf="buildHash!=''">Build: <u class="build-hash" (click)="openBuildInfo()">{{buildHash}}</u></span>
            <span *ngIf="buildTime!=''">Built On: {{buildTime | date:'medium' }}</span>
        </div>
        <div class="help-menu">
            <img src="../../../assets/icons/question.svg" alt="" (click)="openHelpDialog()" title="help">
            <img src="../../../assets/icons/cash.svg" alt="" (click)="openDonations()" title="donate to segfault">
            <img src="../../../assets/icons/code.svg" alt="" (click)="openSource()" title="source code">
        </div>
    </div>
</div>